<template>
    <van-nav-bar
        class="navBarClass"
        :title="title"
        :left-text="leftArrow ? '返回' : ''"
        :left-arrow="leftArrow"
        @click-left="leftClick"
    >
        <template #right>
            <slot name="navRight"></slot>
        </template>
    </van-nav-bar>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
export default defineComponent({
    props: {
        title: {
            type: String,
            default: '',
        },
        leftArrow: {
            type: String,
            default: true,
        },
    },
    setup(props, { emit }) {
        const state = reactive({
            title: props.title,
        })
        const methods = {
            /* 返回 */
            leftClick() {
                //H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的
                // uni.navigateBack({delta:1})
                history.back()
            },
        }
        const apis = {}
        const computeds = {}
        onMounted(() => {})
        return {
            ...apis,
            ...toRefs(state),
            ...methods,
            ...computeds,
        }
    },
})
</script>

<style lang="scss" scoped>
    .navBarClass{
        width:100%;
        position: fixed;
        left:0rpx;
        top:0rpx;
        height:80rpx;
        z-index: 9;
    }
</style>
